<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <title>运动排行榜</title>
    <script src="/addons/hc_step/template/js/jq.js"></script>
    <style>
        body {
            background-color: #F3F2F7;
        }
        .list {
            width: 95%;
            border-radius: 0.5rem;
            background-color: white;
            margin: 1rem auto;
        }

        .list_top {
            display: flex;
            justify-content: space-around;
        }

        .ranking {
            width: 25%;
            height: 5.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ranking_img {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
        }

        .ranking_p {
            width: 25%;
            margin: auto;
            text-align: center;
        }

        .abx {
            width: 25%;
            margin: auto;
            text-align: center;
        }

        .portrait {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
        }

        .list_top_p {
            width: 25%;
            margin: auto;
            text-align: center;
        }

     .ranking img{
         width: 4rem;
     }
    </style>
</head>

<body>
<div class="srceen">

    <div class="list">

        <div id="row">
            <div class="list_top">
                每日运动排行
            </div>
            <div class="list_top">
                <div class="ranking"><p class="abx">排名</p></div>
                <div class="ranking">头像</div>
                <p class="list_top_p">昵称</p>
                <p class="list_top_p">里程</p>
            </div>
            <div id="xiabu"></div>
        </div>
    </div>
</div>
</body>
<script>
    setRank();
    setInterval(function(){
        setRank();
    },60000);

    function setRank() {

        $.ajax({
            type: "POST",
            url: "http://test.18bang.cn/app/index.php?i=14&t=0&v=9.0.0&from=wxapp&c=entry&a=wxapp&do=HealthGrade&m=hc_step",
            dataType: "json",
            success: function(res){
                var daya=res.data.rank1;
                let data = daya;
                console.log(data);
                var items = ''
                for (let i = 0; i < data.length; i++) {
                    if (i==0) {
                        items+= `
            <div class="list_top">
                <div class="ranking">
                  <img src="/addons/hc_step/template/img/1.png" alt="">
                </div>
                <div class="ranking"><img class="portrait" src="${data[i].avatar}" alt=""></div>
                <p class="list_top_p">${data[i].nickname}</p>
                <p class="list_top_p">${data[i].km}公里</p>
            </div>
            `;
                    }else if (i==1){
                        items+= `
            <div class="list_top">
                  <div class="ranking">
                     <img src="/addons/hc_step/template/img/2.png" alt="">
                </div>
                <div class="ranking"><img class="portrait" src="${data[i].avatar}" alt=""></div>
                <p class="list_top_p">${data[i].nickname}</p>
                <p class="list_top_p">${data[i].km}公里</p>
            </div>
            `;
                    } else if(i==2){
                        items+= `
            <div class="list_top">
                 <div class="ranking">
                    <img src="/addons/hc_step/template/img/3.png" alt="">
                </div>
                <div class="ranking"><img class="portrait" src="${data[i].avatar}" alt=""></div>
                <p class="list_top_p">${data[i].nickname}</p>
                <p class="list_top_p">${data[i].km}公里</p>
            </div>
            `;
                    }else {
                        items += `
                <div class="list_top">
                <div class="ranking"><p class="abx">i+1</p></div>
                <div class="ranking"><img class="portrait" src="${data[i].avatar}" alt=""></div>
                <p class="list_top_p">${data[i].nickname}</p>
                <p class="list_top_p">${data[i].km}公里</p>
            </div>
            `;
                    }

                }
                document.getElementById('xiabu').innerHTML=items;
            },
            error: function(xhr, type){
                console.log("数据出错")
            }
        });
    }
</script>

</html>
